<template>
    <el-container :direction="horizontal" >
            <el-aside width="100px">

            </el-aside>
            <el-container :direction="vertical">
                <el-main height="">
                    <el-row :gutter="1" style="margin-bottom: 70px;">
                        <el-col :span="5" :offset="0">
                            <h1>水果类</h1>
                            <el-card style="width: 250px;height: 400px;background: linear-gradient(to right, #ff7e5f, #feb47b);
                            font-size: 20px;color: white;">
                                <template #header >
                                    <h1>新鲜水果</h1>
                                    <span>新鲜水果,时令采摘</span>
                                </template>
                                <el-row :gutter="0">
                                    <el-col :span="8" :offset="0" style="margin-bottom: 15px;" v-for="(item,index) in sg" :key="index">
                                        <el-button text size="default" @click="selectGuo(item)">{{item}}</el-button>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col :span="19" :offset="0">
                            <el-row :gutter="5">
                                <el-col :span="6" :offset="0" v-for="(item,index) in fruit" :key="index" style="margin-top: 60px;">
                                    <el-card style="height: 400px;">
                                        <el-image :src="BASE_URL+item.imageUrl" :fit="fill" style="width: 100%;height: 280px;"  alt="" />
                                        <p></p>
                                        <p style="font-size: 25px;font-weight: bold;color: red;margin: 0 auto;">￥{{ item.price }}</p>
                                        <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                            <a href="#" @click="saveOneProduct(item)" style="">{{ item.description }}</a>
                                        </p>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" style="margin-bottom: 70px;">
                        <el-col :span="5" :offset="0">
                            <h1>蔬菜类</h1>
                            <el-card style="width: 250px;height: 400px;background: linear-gradient(to bottom right, darkolivegreen, lightgreen);
                            font-size: 20px;color: white;">
                                <template #header >
                                    <h1>新鲜蔬菜</h1>
                                    <span>新鲜蔬菜,人工种植</span>
                                </template>
                                <el-row :gutter="0">
                                    <el-col :span="8" :offset="0" style="margin-bottom: 15px;" v-for="(item,index) in sc" :key="index">
                                        <el-button text size="default" @click="selectShu(item)">{{item}}</el-button>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col :span="19" :offset="0">
                            <el-row :gutter="5">
                                <el-col :span="6" :offset="0" v-for="(item,index) in vegetable" :key="index" style="margin-top: 60px;">
                                    <el-card style="height: 400px;">
                                        <el-image :src="BASE_URL+item.imageUrl" :fit="fill" style="width: 100%;height: 280px;"  alt="" />
                                        <p></p>
                                        <p style="font-size: 25px;font-weight: bold;color: red;margin: 0 auto;">￥{{ item.price }}</p>
                                        <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                            <a href="#" @click="saveOneProduct(item)" style="">{{ item.description }}</a>
                                        </p>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" style="margin-bottom: 70px;">
                        <el-col :span="5" :offset="0">
                            <h1>豆类</h1>
                            <el-card style="width: 250px;height: 400px;background: linear-gradient(to bottom right, darkgoldenrod, tan);
                            font-size: 20px;color: white;">
                                <template #header >
                                    <h1>品质大豆</h1>
                                    <span>品质大豆,营养专供</span>
                                </template>
                                <el-row :gutter="0">
                                    <el-col :span="8" :offset="0" style="margin-bottom: 15px;" v-for="(item,index) in dd" :key="index">
                                        <el-button text size="default" @click="selectDou(item)">{{item}}</el-button>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col :span="19" :offset="0">
                            <el-row :gutter="5">
                                <el-col :span="6" :offset="0" v-for="(item,index) in bean" :key="index" style="margin-top: 60px;">
                                    <el-card style="height: 400px;">
                                        <el-image :src="BASE_URL+item.imageUrl" :fit="fill" style="width: 100%;height: 280px;"  alt="" />
                                        <p></p>
                                        <p style="font-size: 25px;font-weight: bold;color: red;margin: 0 auto;">￥{{ item.price }}</p>
                                        <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                            <a href="#" @click="saveOneProduct(item)" style="">{{ item.description }}</a>
                                        </p>
                                    </el-card>
                            </el-col>
                            </el-row>
                        </el-col>
                    </el-row>

                </el-main>
                <el-footer height="150px">
                    <!-- Footer content -->
                </el-footer>
            </el-container>
    </el-container>
</template>
<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
import qs from 'qs';
import router from '@/router';
//定义左侧导航菜单内容
const sg = ref(['草莓','苹果','香蕉','水蜜桃','葡萄','芒果','杨梅'])
const sc = ref(['白菜','菠菜','生菜','油菜','卷心菜','油麦菜','芹菜'])
const dd = ref(['四季豆','豌豆','荷兰豆','毛豆','豇豆','扁豆','蚕豆'])

//定义搜索数据
const Search = ref({})
//定义水果模块数据数组
const fruit = ref([])
//定义蔬菜模块数据数组
const vegetable = ref([])
//定义豆类模块数据数组
const bean = ref([])

//保存单个商品
const saveOneProduct = (item) => {
    router.push('/oneProduct')
    localStorage.setItem('product',JSON.stringify(item))
}
const selectGuo = (item)=>{
    Search.value.category = '水果'

    Search.value.name = item
    let data = qs.stringify(Search.value)
    axios.get(BASE_URL+'/v1/product/list?'+data).then(response => {
        if(response.data.code === 2000){
            fruit.value = response.data.data
        }else{
            ElMessage.error(response.data.msg)
        }
    })
}
const selectShu = (item)=>{
    Search.value.category = '蔬菜'

    Search.value.name = item
    let data = qs.stringify(Search.value)
    axios.get(BASE_URL+'/v1/product/list?'+data).then(response => {
        if(response.data.code === 2000){
            vegetable.value = response.data.data
        }else{
            ElMessage.error(response.data.msg)
        }
    })
}

const selectDou = (item)=>{
    Search.value.category = '豆类'

    Search.value.name = item
    let data = qs.stringify(Search.value)
    axios.get(BASE_URL+'/v1/product/list?'+data).then(response => {
        if(response.data.code === 2000){
            bean.value = response.data.data
        }else{
            ElMessage.error(response.data.msg)
        }
    })
}

onMounted(()=>{
    selectGuo()
    selectShu()
    selectDou()
})
</script>


<style scoped>
a{
    color: black;
    text-decoration: none;
}
a:hover{
    color: red;
}
</style>
